<template>
  <div class="login_container">
       <vue-particles
          color="#409EFF"
          :particleOpacity="0.7"
          :particlesNumber="60"
          shapeType="circle"
          :particleSize="6"
          linesColor="#409EFF"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push">
             </vue-particles>
   <div class="login_box">
    <div class="avatar_box"> 
     <img src='../assets/01.jpg' alt="">
    </div>

    <!-- 登录表单区域-->
<el-form ref="loginFormRef01" label-width="0px" class="login_form" :model="loginForm" :rules="loginFormRules">
    <!-- 用户名-->
     <el-form-item prop="username">
     <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
    </el-form-item>
    <!-- 密码-->
    <el-form-item prop="password">
    <el-input prefix-icon="iconfont icon-3702mima" 
    v-model="loginForm.password"
     type="password">
    </el-input>
    </el-form-item>
    <!-- 按钮区域-->
  <el-form-item class="btns">
      <el-button type="primary" @click="login">登录</el-button>
      <el-button type="info" @click="resetLoginForm">重置</el-button>
    </el-form-item>
  </el-form>

   </div>
  </div> 
</template>

<script>
  export default{
       data()
       {
           return{
               //登录表单的数据绑定对象
               loginForm:{
                   username:'admin',
                   password:'123456'
               },
               //表单的验证对象
               loginFormRules:{
                   //账号验证
                   username:[
                        { required: true, message: '请输入登录账号', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger:'blur'} 
                   ],
                   //密码验证
                   password:[
                        { required: true, message: '请输入登录密码', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger:'blur'} 
                   ]
               }
           }
       },
       methods:{
           //重置按钮
           resetLoginForm(){
               this.$refs.loginFormRef01.resetFields();
           },
           login()
           {
               this.$refs.loginFormRef01.validate(async valid=>{
                if(!valid) return;
               
               const data = await this.$http.post("/server/sp-manager/run?"+"username="+this.loginForm.username+"&"+"password="+this.loginForm.password,
              );
            
               if(data.data==null)
               {
                this.$message.error("登陆失败！")
               //  console.log(res);
                 return;
               }
                                
                this.$message.success("登陆成功！")
              
           //1.登录成功之后保存后台穿过来的token，保存到客服端的sessionStorage中
           //1.1为了验证用户是否正确登录     
           //    window.sessionStorage.setItem("token",res.data.token);
                window.sessionStorage.setItem("token",data.headers.token);
           //2.通过编程式导航跳转到后台主页
               this.$router.push("/home")   
               })
           }
       }
  };
</script>
<style lang="less" scoped>
     .login_container{
      background-color: #2b4b6b;
      height:1000px
     }
     .login_box{
         width: 450px;
         height: 300px;
         background-color: #fff;
         border-radius:3px;
         position: absolute;
         left: 50%;
         top: 50%;
         transform:translate(-50%,-50%)
     }
     .avatar_box{
         height: 130px;
         width: 130px;
         border: 1px solid #eee;
         border-radius:50%;
        padding:10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color:#fff 
     }
     img {
             width: 100%;
             height: 100%;
             border-radius:50%;
            background-color:#eee
         }
    .btns{
        display:flex;
        justify-content: flex-end
    }     
    .login_form{
        position:absolute;
        bottom:0;
        width:100%;
        padding: 0 20px;
        box-sizing: border-box
    }
    #particles-js{
         width: 100%;
         height: calc(100% - 100px);
         position: absolute;
    }
</style>